<template>
	<uni-section title="基本示例" type="line">
		<view class="example-body box">
			<button class="button" type="primary" @click="toggle('bottom')"><text class="button-text">底部</text></button>
		</view>
	</uni-section>
	<view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view style="height: 250px;" class="popup-content"
				:class="{ 'popup-height': type === 'left' || type === 'right' }">
				<uni-grid borderColor="white" :column="4">
					<uni-grid-item>
						<text class="text">
							<image
								src="https://cdn8.axureshop.com/demo2024/2251242/images/%E5%88%86%E4%BA%AB%E5%BC%B9%E7%AA%97%E5%BC%B9%E6%A1%86/u4037.svg"
								mode=""></image>
							<view>微信</view>
						</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">
							<image
								src="https://cdn8.axureshop.com/demo2024/2251242/images/%E5%88%86%E4%BA%AB%E5%BC%B9%E7%AA%97%E5%BC%B9%E6%A1%86/u4038.svg"
								mode=""></image>
							<view>朋友圈</view>
						</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">
							<image
								src="https://cdn8.axureshop.com/demo2024/2251242/images/%E5%88%86%E4%BA%AB%E5%BC%B9%E7%AA%97%E5%BC%B9%E6%A1%86/u4039.svg"
								mode=""></image>
							<view>QQ</view>
						</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">
							<image
								src="https://cdn8.axureshop.com/demo2024/2251242/images/%E5%88%86%E4%BA%AB%E5%BC%B9%E7%AA%97%E5%BC%B9%E6%A1%86/u4040.svg"
								mode=""></image>
							<view>QQ空间</view>
						</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">
							<image class="img1"
								src="https://cdn8.axureshop.com/demo2024/2251242/images/%E5%88%86%E4%BA%AB%E5%BC%B9%E7%AA%97%E5%BC%B9%E6%A1%86/u4049.svg"
								mode=""></image>
							<view>生成海报</view>
						</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">
							<image class="img1"
								src="https://cdn8.axureshop.com/demo2024/2251242/images/%E5%88%86%E4%BA%AB%E5%BC%B9%E7%AA%97%E5%BC%B9%E6%A1%86/u4046.svg"
								mode=""></image>
							<view>复制</view>
						</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">
							<image class="img1"
								src="https://cdn8.axureshop.com/demo2024/2251242/images/%E5%88%86%E4%BA%AB%E5%BC%B9%E7%AA%97%E5%BC%B9%E6%A1%86/u4043.svg"
								mode=""></image>
							<view>分享</view>
						</text>
					</uni-grid-item>
				</uni-grid>
				<button>取消</button>
			</view>
		</uni-popup>
	</view>


</template>





<script >
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: ''
			}
		},
		onReady() {},
		methods: {
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			messageToggle(type) {
				this.msgType = type
				this.messageText = `这是一条${type}消息提示`
				this.$refs.message.open()
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				this.$refs.message.open()
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogInputConfirm(val) {
				uni.showLoading({
					title: '3秒后会关闭'
				})

				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
				}, 3000)
			},
			shareToggle() {
				this.$refs.share.open()
			}
		}
	}
</script>




<style scoped>
	.img1 {
		width: 40px;
		height: 40px;
	}

	.text {
		display: flex;
		flex-direction: column;
		text-align: center;
		background: white;
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}

	image {
		width: 50px;
		height: 50px;
	}
</style>